<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/look.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootbox.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/fileinput.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/zh.js"></script>
    <link rel="stylesheet" href="../js/bootstrap/css/fileinput.css" />
    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap-treeview.min.css" />
    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap.addtabs.css" />
    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap-table.min.css" />

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }
        a  {
            text-decoration: none;

        }
        .header ul{
            width: 160px;
            height: 50px;
            /* background-color: black; */
            /**设置成为弹性容器**/
            display: flex;
            margin-top: 20px;
            margin-left: 30px;
        }
        .header ul p{
            font-size: 22px;
        }
        .font-color{
            background-color: rgb(242,247,251);
        }
        .head-font{
            background-color: #0066ff;
            width: 7px;
            height: 25px;
            border-radius: 10px;
            margin-top: 5px;
        }
        /****************第一个表格*******************/
        .look-one-tb{
            width: 98%;
            height: 300px;
            margin: 0 auto;
            /* background-color: #0066ff; */
            border-top: 1px solid silver;
        }
        #one-tr td{
            padding-right: 160px;
            padding-top: 30px;
        }
        #two-tr td{
            padding-top: 30px;
        }
        .circle-one{
            width: 50px;
            /* background-color: #6c76f4; */
            /* background-color: #fa746b; */
            /* background-color: #fddb78; */
            background-color: rgba(255, 0, 0, 0.3);
            border-radius: 5px;
            margin-right: 5px;
            float: right;
        }
        .circle-two{
            width: 50px;
            /* background-color: #6c76f4; */
            /* background-color: #fa746b; */
            /* background-color: #fddb78; */
            background-color: rgba(0, 0, 255, 0.3);
            border-radius: 5px;
            margin-right: 145px;

            float: right;
        }
        /******************第二个表格************************/
        .look-two-tb{
            width: 100%;
            height: 300px;
            margin: 30px auto;
            /* background-color: #0066ff; */
            border-top: 1px solid silver;
            border-bottom: 1px solid silver;
        }
        #one-tr td{
            padding-right: 100px;
            padding-top: 30px;
        }
        #two-tr td{
            padding-top: 30px;
        }
        .circle-one{
            width: 50px;
            /* background-color: #6c76f4; */
            /* background-color: #fa746b; */
            /* background-color: #fddb78; */
            background-color: rgba(255, 0, 0, 0.3);
            border-radius: 5px;
            margin-right: 5px;
            float: right;
        }
        .circle-two{
            width: 50px;
            /* background-color: #6c76f4; */
            /* background-color: #fa746b; */
            /* background-color: #fddb78; */
            background-color: rgba(0, 0, 255, 0.3);
            border-radius: 5px;
            margin-right: 145px;

            float: right;
        }

    </style>
</head>
<body>
    <!--头部标签-->
    <div class="header">
        <ul>
          <li><div class="head-font"></div></li>
          <li><p>&nbsp; &nbsp;签约详情</p></li>
        </ul>    
      </div>
    <!--第一个表格-->
    <div class="look-one-tb">
        <br>
        <h4>居民信息</h4>
        <table>
            <tr id="one-tr">
                <td> &nbsp;  &nbsp;  &nbsp;  &nbsp; <font  style="color: silver;">姓名 &nbsp; &nbsp;&nbsp;</font>王岸然</td>
                <td><font  style="color: silver;">身份证号码 &nbsp; &nbsp; </font>  &nbsp;31714685+6851</td>
                <td><font  style="color: silver;">性别 &nbsp; &nbsp; </font>  &nbsp;女</td>
                <td><font  style="color: silver;">&nbsp; &nbsp; 年龄 &nbsp; &nbsp; </font>  &nbsp;26</td>
            </tr>
            <tr id="two-tr">
                <td><font  style="color: silver;">联系电话 &nbsp; &nbsp; </font>  &nbsp;18035972560</td>
                <td><font  style="color: silver;">&nbsp; &nbsp; 现居地 &nbsp; &nbsp; </font>  &nbsp;怀柔区洛西县建设路青莲小区6-601</td>
                <td></td>
                <td>
                    <font  style="color: silver;">居民标签 &nbsp;&nbsp;</font>
                    <div class="circle-two"><font> &nbsp;冠心病</font></div>
                    <div class="circle-one"><font> &nbsp;高血病</font></div>
                </td>
            </tr>
        </table>
        <br>
        <div>
            <div style="float: left;"><font  style="color: silver;">家庭成员 &nbsp; &nbsp;&nbsp; &nbsp; </font></div>
          
           <div style="width: 202px;height:87px;float: left;border-radius: 5px;background-color: white;margin-right: 10px;border: 1px solid silver;">
            <img src="../img3/屏幕截图 2022-09-21 115313.png" style="width: 200px;">
        </div> 
        <div style="width: 205px;height:87px;float: left;border-radius: 5px;background-color: white;border: 1px solid silver;">
            <img src="../img3/屏幕截图 2022-09-21 115342.png" style="width: 200px;">
        </div> 
        </div>
    </div>
    <!--第二个标签-->
    <div class="look-two-tb">
        <br>
        <h4>居民信息</h4>
        <table>
            <tr id="one-tr">
                <td><font  style="color: silver;">签约编号 &nbsp; &nbsp;&nbsp;</font>201900009091</td>
                <td><font  style="color: silver;">签约状态 &nbsp; &nbsp; </font>  &nbsp;<font  style="color: #28d094;">待审核</font></td>
                <td><font  style="color: silver;">签约机构 &nbsp; &nbsp; </font>  &nbsp;洛西社区卫生服务站</td>
                <td><font  style="color: silver;">签约团队 &nbsp; &nbsp; </font>  &nbsp;李明明团队</td>
            </tr>
            <tr id="two-tr">
                <td><font  style="color: silver;">签约医生 &nbsp; &nbsp; </font>  &nbsp;老人服务包</td>
                <td><font  style="color: silver;">&nbsp; &nbsp; 服务包 &nbsp; &nbsp; </font>  &nbsp;老人服务包</td>
                <td>
                    <font  style="color: silver;">签约周期 &nbsp; &nbsp; </font>  &nbsp;1年
                </td>
                <td><font  style="color: silver;">&nbsp; &nbsp; 费用 &nbsp; &nbsp; </font>  &nbsp;￥20</td>
            </tr>
            <tr id="two-tr">
                <td><font  style="color: silver;">签约类型 &nbsp; &nbsp; </font>  &nbsp;首次签约</td>
                <td><font  style="color: silver;">申请时间 &nbsp; &nbsp; </font>  &nbsp;2020/10/09 10:09:09 </td>
                <td>
                    <font  style="color: silver;">生效日期 &nbsp; &nbsp; </font>  &nbsp;2020/10/09
                </td>
                <td></td>
            </tr>
            <tr id="two-tr">
                <td><font  style="color: silver;">签约备注 &nbsp; &nbsp; </font>  &nbsp;无</td>
                <td></td>
                <td></td>
                <td>
                </td>
            </tr>
            
        </table>
    </div>
    <button type="button"  onclick="userSearch()" class="btn btn-default" style="height: 40px;width: 120px; background-color: #0066ff;color: white;margin-right: 5px;"> <a href="../edit" style="text-decoration: none; ">编辑签约信息</a></button>
    <button type="button"  id="btn_getby" class="btn btn-default" style="height: 40px;width: 120px; background-color: #28d094;color: aliceblue;margin-right: 5px;">审核通过</button>
    <button type="button"  id="btn_return" class="btn btn-default" style="height: 40px;width: 120px; background-color: #fa746b;color: aliceblue;margin-right: 5px;">驳回</button>
    <button type="button"  onclick="userSearch()" class="btn btn-default" style="height: 40px;width: 60px;">驳回</button>
    <!-- 返回弹框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div style="width: 500px; height: 300px;background-color: whitesmoke;margin: 150px auto;">
        <h3 class="modal-title" style="padding-top: 10px;">&nbsp; &nbsp;驳回确认</h3><!--弹窗的标题-->
        <br>
        <br>
        <div>
            <div style="float: left;"><font  style="color: silver;">&nbsp; &nbsp;驳回原因 &nbsp; &nbsp;&nbsp; &nbsp; </font></div>
          
           <div style="width: 300px;height: 100px;border: 1px solid silver;float: left;">
            <font  style="color: silver;">&nbsp; &nbsp;请输入驳回原因 &nbsp; &nbsp;&nbsp; &nbsp; </font>
           </div> 
           
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <button type="button" class="btn btn-primary" onclick="add()" style="float: right;margin-right: 100px;">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" style="float: right;margin-right: 10px;">关闭</button><!--弹窗的尾部-->
      </div>
      
        

</div>
    <!-- 审核通过弹框 -->
    <div class="modal fade" id="getBy" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div style="width: 500px; height: 200px;background-color: whitesmoke;margin: 150px auto;border-radius: 5px;">
        <h4 class="modal-title" style="padding-top: 20px;margin-left: 20px;">
        <img src="../img3/问号.png" width="40px">
        &nbsp; &nbsp;审核通过</h4><!--弹窗的标题-->
        <br>
        <br>
            <h4 style="margin-left: 80px;">确定通过审核？</h4>
        <button type="button" class="btn btn-primary" onclick="add()" style="float: right;margin-right: 100px;">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" style="float: right;margin-right: 10px;">关闭</button><!--弹窗的尾部-->
      </div>
      
        

</div>
</body>
<script>


      //打开弹框
  $("#btn_return").click(function () {
    $("#myModalLabel").text("新增");
    $('#myModal').modal();
    $('#myModal').on('hidden.bs.modal', function () {
      document.querySelector('#Form').reset();
    });
  });
  //打开审核通过按钮
  $("#btn_getby").click(function(){
    $("#myModalLabel").text("新增");
    $('#getBy').modal();
    $('#getBy').on('hidden.bs.modal', function () {
      document.querySelector('#Form').reset();
    });
  })
</script>
</html>